// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
  
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);

// 点击按钮触发文件上传功能
$(".upload").click(function() {
    $("#file").click()
})

// 更换图片
$("#file").change(function () {
    // 找到文件对象
    let file = this.files[0];
    // 为对象生成一个临时的 url
    let url = URL.createObjectURL(file);
    // 销毁剪裁区, 更换剪裁的的图片, 重建剪裁取
    $image.cropper('destroy').attr('src', url).cropper(options);
})
// ------------------------ 点击确定，完成更换 ---------------------------
$('.confirm').on('click', function () {
    // 1. 完成剪裁，得到canvas图片
    let canvas = $image.cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 2. 把图片转成字符串形式
    let str = canvas.toDataURL('image/png');
    // console.log(str);
    // 3. ajax提交字符串即可
    $.ajax({
        type: 'POST',
        url: '/my/update/avatar',
        data: {
            avatar: str
        },
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                // 调用父页面的函数，重新渲染头像
                window.parent.renderIndex();
            }
        }
    });
})